<template>
  <div id="app">
    <!-- 头部 header -->
    <mt-header fixed title="固定在顶部" style="z-index:99;">
      <!-- 返回按钮的制作 -->
      <span slot="left" @click="goback" v-if="flag">
        <mt-button icon="back">返回</mt-button>
      </span>
    </mt-header>

    <!-- 内容部分，路由的坑，因为一次只显示一个路由，所以需要一个坑 -->
    <!-- 给页面切换添加动画 -->
    <transition name="v1">
      <router-view></router-view>
    </transition>

    <!-- 底部导航navbar部分，做成路由模块 -->
    <nav class="mui-bar mui-bar-tab">
      <router-link class="mui-tab-item1" to="/index">
        <span class="mui-icon mui-icon-home"></span>
        <span class="mui-tab-label">首页</span>
      </router-link>
      <router-link class="mui-tab-item1" to="/vip">
        <span class="mui-icon mui-icon-qq"></span>
        <span class="mui-tab-label">会员</span>
      </router-link>
      <router-link class="mui-tab-item1" to="/car">
        <span class="mui-icon mui-icon-extra mui-icon-extra-cart">
          <!-- vue中不涉及数据的可以使用一下下id获取DOM元素 -->
          <!-- 获取getters中包装好的总件数 -->
          <span class="mui-badge" id="car">{{$store.getters.getCarCount}}</span>
        </span>
        <span class="mui-tab-label">购物车</span>
      </router-link>
      <router-link class="mui-tab-item1" to="/myinfo">
        <span class="mui-icon mui-icon-contact"></span>
        <span class="mui-tab-label">个人中心</span>
      </router-link>
    </nav>
  </div>
</template>

<script>
export default {
  name: "app",
  data: function() {
    return {
      // 控制显示按钮显示隐藏
      flag: false
    };
  },
  components: {},
  created() {
    // 页面一刷新，假如不是首页，flag应该为true
    if (this.$route.path == "/index") {
      this.flag = false;
    } else {
      this.flag = true;
    }
    // 页面已加载，首先获取本地存储的数据，赋值给state.shopCar,就可以立马显示购物车图标中商品数量
    let innitarr = JSON.parse(localStorage.getItem("shopcar")) || [];
    this.$store.commit("innitShopcar", innitarr);
  },
  methods: {
    goback() {
      // 返回按钮
      this.$router.go(-1);
    }
  },
  // 返回按钮在首页隐藏，其他页显示，使用路由监听，只能监听路由变化，但是页面刷新监听不到
  watch: {
    "$route.path": function(newVal) {
      if (newVal == "/index") {
        this.flag = false;
      } else {
        this.flag = true;
      }
    }
  }
};
</script>

<style lang="less" >
body {
  background: #fff !important;
  font-size: 14px !important;
}
#app {
  padding-top: 40px;
  padding-bottom: 50px;
  background-color: #fff;
  //bug: 解决动画切换的时候有滚动条，记得只是横向的隐藏
  overflow-x: hidden;
  // 修改.mui-tab-item为.mui-tab-item1，因为和imgs页面，mui滚动冲突
  .mui-bar-tab .mui-tab-item1.mui-active {
    color: #007aff;
  }
  .mui-bar-tab .mui-tab-item1 {
    display: table-cell;
    overflow: hidden;
    width: 1%;
    height: 50px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #929292;
  }
  .mui-bar-tab .mui-tab-item1 .mui-icon {
    top: 3px;
    width: 24px;
    height: 24px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .mui-bar-tab .mui-tab-item1 .mui-icon ~ .mui-tab-label {
    font-size: 11px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
// 动画类
.v1-enter {
  opacity: 0;
  transform: translateX(100%);
}
.v1-leave-to {
  opacity: 0;
  transform: translateX(-100%);
}
.v1-enter-active,
.v1-leave-active {
  transition: all 1s ease;
}
// 为了解决切换时先下后上的问题,使离开的盒子脱离文档流
.v1-leave-active {
  position: absolute;
}
</style>

